<template>
	<view class="page">
		<view class="top">
			<view class="group" @click="toUserInfo">
				<view class="userInfo">
					<!-- user.展示用户头像 {{user.展示用户头像}} -->
					<view class="a-yuantou-150">
						<image :src="user.展示用户头像" mode="aspectFill"></image>
					</view>
					<view class="text" v-if="user?.hasLogin">
						<view class="nickname">{{user.展示用户名}}</view>
						<!-- {{user.userInfo}} -->
						<view class="year">
							<uni-dateformat :date="user.userInfo.CreatedAt"
								:threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>
							注册
						</view>
					</view>
					<view class="text" v-else>
						<view class="nickname">点击登录</view>
					</view>
				</view>
				<view>
					<uni-icons type="right" size="20" color="888"></uni-icons>
				</view>
			</view>

			<view class="bg">
				<image :src="user.展示用户头像" mode="aspectFill"></image>
			</view>
		</view>

		<view class="main">
			<view class="column q-pa-sm q-gutter-md">
				<view class="orders a-card">
					<view class="title">
						我的订单
						<navigator class="navigator" url="/pagesOrder/list/list?zhuangtai=全部" hover-class="none">
							查看全部<text class="icon-right"></text>
						</navigator>
					</view>
					<view class="section row justify-around">
						<!-- 订单 -->
						<navigator v-for="item in orderTypes" :key="item.type" :class="item.icon"
							:url="`/pagesOrder/list/list?zhuangtai=${item.状态}`" class="navigator" hover-class="none">
							{{ item.状态 }}
						</navigator>
						<!-- 客服 -->
						<!-- #ifdef MP-WEIXIN -->
						<button class="contact icon-handset a-qingchu" open-type="contact">客服</button>
						<!-- #endif -->
					</view>
				</view>

				<view class="a-card">
					<uni-list>
						<uni-list-item showArrow title="收货地址" @click="点收货地址" clickable />
						<uni-list-item>
							<template v-slot:body>
								<view class="row flex-center full-width">
									<button size="mini" @tap="user.退出登录">退出登录</button>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';

	import use_user from "@/stores/use_user.js"
	const user = use_user()

	const orderTypes = [
		{ 状态: '待付款', icon: 'icon-currency' },
		{ 状态: '待发货', icon: 'icon-gift' },
		{ 状态: '待收货', icon: 'icon-check' },
		{ 状态: '待评价', icon: 'icon-comment' },
	]

	function 点收货地址(params) {
		if (!user.要登录否()) return
		uni.navigateTo({
			url: '/pagesMember/address/address'
		});
	}

	const toUserInfo = () => {
		if (user.hasLogin) {
			uni.navigateTo({
				url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
			});
		} else {
			user.去登录()
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		// min-height: 100%;
	}

	.page {
		display: block;
	}

	.orders {
		.title {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #1e1e1e;

			.navigator {
				font-size: 24rpx;
				color: #939393;
				float: right;
			}
		}

		.section {

			.navigator,
			.contact {
				text-align: center;
				font-size: 24rpx;
				color: #333;

				&::before {
					display: block;
					font-size: 60rpx;
					color: #ff9545;
				}

				&::after {
					border: none;
				}
			}
		}
	}

	.top {
		height: 300rpx;
		// flex: 1;
		background: #bbb;
		padding: 0 30rpx;
		// 考虑小程序胶囊区域👇
		padding-top: var(--status-bar-height);
		position: relative;
		display: flex;
		align-items: center;

		.group {
			position: relative;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			color: #fff;

			.userInfo {
				display: flex;
				width: 100%;
				align-items: center;



				.text {
					padding-left: 20rpx;

					.nickname {
						font-size: 44rpx;
						font-weight: 600;
					}

					.year {
						font-size: 26rpx;
						opacity: 0.6;
						padding-top: 5rpx;
					}
				}
			}
		}

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				filter: blur(20px);
				transform: scale(1);
				opacity: 0.5;
			}
		}
	}

	.main {
		// height: 1200px;
		min-height: calc(100% - 300rpx + 100rpx);
		// height: 100%;
		// flex: 1;
		background: #fff;
		border-radius: 30rpx;
		transform: translateY(-30rpx);
		padding: 30rpx 0;
		// margin-bottom: -30rpx;
		padding-bottom: 50px;
	}

	.list {
		.group {
			padding: 15rpx 30rpx;
			border-bottom: 15rpx solid #f4f4f4;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 0;
				color: #555;
				border-bottom: 1rpx solid #ffc9c9;

				.left {
					display: flex;
					align-items: center;
					justify-content: center;

					.iconfont {
						font-size: 38rpx;
						margin-right: 10rpx;
					}
				}
			}

			.item:last-child {
				border: none;
			}
		}

		.group:last-child {
			border: none;
		}
	}
</style>